import React, { PureComponent } from 'react'
import {
  BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts'

export default class Example extends PureComponent {
  static jsfiddleUrl = 'https://jsfiddle.net/alidingling/9hjfkp73/'

  render() {
    const { data } = this.props
    const charData = data.reduce(
      (pre, next) => {
        pre.bars.push(<Bar dataKey={next.name} stackId="a" fill={next.color} />)
        next.ann_count_array.map((ann) => {
          if (pre.data[ann.day] === undefined) {
            pre.data[ann.day] = { name: ann.day }
          }
          pre.data[ann.day][next.name] = parseInt(ann.anns)
        })
        return pre
      },
      { bars: [], data: {} },
    )
    const dataArray = Object.keys(charData.data).map(key => charData.data[key])
    return (
      <div>
        <BarChart
          width={350}
          height={300}
          data={dataArray}
          style={{
            textAlign: 'center',
            display: 'inline-block',
          }}
          margin={{
            top: 20,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          {charData.bars}
        </BarChart>
      </div>
    )
  }
}
